<!-- src/components/Dropdown.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
});
const isOpen = ref(false);
const dropDownRef = ref(null);
const menuHeight = ref(0);
const animateFlag = ref(false);
const toggleDropdown = () => {
  if(isOpen.value) {
    setTimeout(() => {
      isOpen.value = false;
    }, 400)
  } else {
    isOpen.value = !isOpen.value;
  }
  setTimeout(() => {
    animateFlag.value = !animateFlag.value;
  }, 100)
};
const stopPropagation = (event: Event) => {
  toggleDropdown()
  event.stopPropagation();
};
onMounted(() => {
  // 获取dropDownRef.value 距离页面底部的高度
  setTimeout(() => {
        const rect = dropDownRef?.value?.getBoundingClientRect();
        const height = window.innerHeight - rect.bottom;
        console.log('height', height)
        menuHeight.value = height;
      },
  300)
});

</script>

<template>
  <div class="dropdown" ref="dropDownRef">
    <div class="dropdown-trigger" @click="toggleDropdown">
      <div class="dropdown-trigger-content">
        <span>{{ props.title }}</span>
        <img :class="['triangleImage', animateFlag ? 'triangleUp' : '']"
             src="@/assets/vehicleStyleConfig/triangle.png" />
      </div>
    </div>
    <div  v-if="isOpen">
      <div class="dropdown-menu" :style="{backgroundColor: animateFlag ? 'rgba(0,0,0,0.7)' : 'transparent', height: menuHeight + 'px'}"
           @touchmove.stop.prevent
           @click.stop.prevent="stopPropagation">
        <div :class="{'dropdown-content': true, show: animateFlag, hide:!animateFlag}">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;

  .dropdown-trigger {
    cursor: pointer;
    height: 48px;
    line-height: 48px;
    width: 100%;
    padding: 0 15px 0 0;
    background-color: #ffffff;
    color: #252525;
    .dropdown-trigger-content{
      padding-left: 15px;
      width: 50%;
      display: flex;
      align-items: center;
      position: sticky;
      left: 0;
    }
    .triangleImage {
      width: 8px;
      height: 8px;
      margin-left: 8px;
    }
    .triangleUp {
      transform: rotate(-180deg);
    }
  }

  .dropdown-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 100;
    transition: background-color 0.3s ease;
  }
  .dropdown-content{
    background-color: white;
    transition: height 0.2s ease;
    &.show{
      height: 90px;
    }
    &.hide{
      height: 0;
    }
    overflow: hidden;
  }
}
</style>